<template>
	<view>
		
	<view class="roombody">
			<view class="mask" @click="close()"  @touchmove.stop.prevent></view>
			<view class="room-body">
				<view class="room-head">
					<text>密室逃脱</text>
					<uni-icon type="closeempty" size="22" @click="close()" color="#7B7B7B"></uni-icon>
					<!-- <image src="../../../static/close.png" class="close" @click="close()" mode=""></image> -->
				</view>
				<view class="room-area" >
					<view class="header">
						<image class="header-bg" src="/static/banner.png" mode=""></image>
						<view class="play" @click="toRoomPos"></view>
						<view class="p-num" @click="play">
							<image src="/static/tupian.png" mode="aspectFit"></image>
							<text>10</text>
						</view>
						<view class="p-num" style="top: 288upx;">
							<image class="VR-img" src="/static/360VR.png" mode="aspectFit"></image>
						</view>
						<!-- <view class="back" @click="back">
							<image src="/static/fanhui.png" ></image>
						</view> -->
					</view>
					
					
						<view class="orderC-body" style="margin-bottom: 110upx;">
							
							<view class="order-title">
								<text class="order-title-food">密室逃脱</text>
							</view>
							<view class="room-tips">
								<view class="room-tips-item" v-for="(item,index) in tipsData" :key='index'>
									<image :src="item.icon" mode=""></image>
									<text>{{item.name}}</text>
								</view>
							</view>
							<view class="hd-list">
								<view class="hd-item">
									<image class="item-img" src="/static/shop/choose.png" mode=""></image>
									<text class="item-text">免预约</text>
								</view>
								<view class="hd-item">
									<image class="item-img" src="/static/shop/choose.png" mode=""></image>
									<text class="item-text">随时退</text>
								</view>
							</view>
							
							<view class="sm-list">
								<view class="sm-item" v-for="(item,index) in smData" :key='index' v-if="showMoreSm || index<2 ">
									<view class="list-title">
										<text class='shu'></text>
										<text>{{item.name}}</text>
									</view>
									<text class="sm-top">(此编辑内容仅用来展示)</text>
									<view class="sm-text">
										<view class="text-item" v-for="(text,index) in item.data" :key='index'  >
											{{text}}
										</view>
									</view>
								</view>
							</view>
							
							<view v-if="!showMoreSm" @click="moreSm" class="more-sm">
								<text>更多须知</text>
								<image src="../static/myPic/right.png" mode=""></image>
							</view>
							<view v-if="showMoreSm" @click="shouqiSm" class="more-sm">
								<text>收起</text>
								<image class="shouqi" src="../static/myPic/right.png" mode=""></image>
							</view>
						</view>
						<view class="bottom">
							<text class="bottom-price"><text style="font-size: 24upx;">￥</text>99.8</text>
							<view class="bottom-buy" @click="toOrder">立即预定</view>
							<view class="bottom-add" @click="payXc">加入行程</view>
						</view>
					</view>
			</view>
		</view>
		<xingcheng-type v-if='showChooseType' :config='typeConfig'></xingcheng-type>
	</view>
</template>

<script>
	import uniIcon from '@/components/uni-icon/uni-icon'
	export default{
		components:{
			uniIcon
		},
		props: {
			roomConf: {
				type: Object,
				default: function(){
					return {
						openMore:false,
						showBanner:true,
						showBottom:true
					}
				}
			},
		},
		data(){
			return{
				showMoreSm:false,
				isFenxiang:true,
				isShoucang:false,
				isAdd:false,
				typeIndex:0,
				openJJ:false,
				showFx:false,
				type: '',//uniPopup组件类型
				showColl:false,
				toPay:false,
				showChooseType:false,
				statusBarHeight:global.statusBarHeight + 'px',
				typeConfig:{
					typeId:4
				},
				tipsData:[
					{
						icon:'../../../static/hotel/pingmishu.png',
						name:'难度'
					},
					{
						icon:'../../../static/hotel/online.png',
						name:'类型 沉浸体验、恐怖'
					},
					{
						icon:'../../../static/hotel/chuanghu.png',
						name:'限时 60分钟'
					},
					{
						icon:'../../../static/hotel/dachuang.png',
						name:'人数 2-8人'
					},
				],
				smData:[
					{
						name:'主题描述',
						data:[
							'【主题背景】不知道从何时起，我失去了对颜色的感，我的生命只剩下黑白灰三种颜色。看不到色彩的在生活中诸多不便，，或许我可以从过的回忆中解开我的重疑感找到致使我得色言的原因。'

						]
					},
					{
						name:'预订说明',
						data:[
						'①：需要连住，增加入住晚数即可。（无增加/减少的按钮时，说明该产品不支持连住，请联系客服。）',
						'②：入住时间可以重新选择（玩乐产品的日期也可重新选择，不做操作时，与入住日期为同一天）。',
						]
					},
					{
						name:'使用说明',
						data:[
						'①：需要连住，增加入住晚数即可。（无增加/减少的按钮时，说明该产品不支持连住，请联系客服。）',
						'②：入住时间可以重新选择（玩乐产品的日期也可重新选择，不做操作时，与入住日期为同一天）。',
						]
					},
					{
						name:'时间说明',
						data:[
						'①：需要连住，增加入住晚数即可。（无增加/减少的按钮时，说明该产品不支持连住，请联系客服。）',
						'②：入住时间可以重新选择（玩乐产品的日期也可重新选择，不做操作时，与入住日期为同一天）。',
						'③：有的产品需要先选择套餐，请跟随提示进行选择。'
						]
					},
					
				],
				bottomData: [
					{
						text: '微信',
						icon: '/static/audio/fx-wx.png',
						name: 'wx'
					},
					{
						text: '朋友圈',
						icon: '/static/audio/fx-friend.png',
						name: 'pyq'
					},
					{
						text: 'QQ',
						icon: '/static/audio/fx-qq.png',
						name: 'qq'
					},
					{
						text: 'QQ空间',
						icon: '/static/audio/fx-qqzone.png',
						name: 'qqkj'
					}
					
				],
			}
		},
		methods: {
			close(){
				//#ifdef APP-PLUS|| MP-WEIXIN
				this.$parent.closePlayDetail()
				//#endif
				//#ifndef APP-PLUS|| MP-WEIXIN
				this.$parent.$parent.closePlayDetail()
				//#endif
			},
			moreSm(){
				this.showMoreSm = true
				this.showSmNum = this.smData.length
			},
			shouqiSm(){
				this.showMoreSm = false
				this.showSmNum = 2
			},
			payXc(){
				// if(this.xcId!=null){
				// 	this.$store.state.tabInd = 3
				// 	uni.navigateTo({
				// 		url:'../../gonglue/glTabbar'
				// 	})
				// }else{
				// 	this.showXc = true
				// }
				this.$store.commit('showXcTypeUpdate',true);
				
				this.showChooseType=true
				document.body.style.overflow = 'hidden'
			},
			closeXcType(){
				this.showChooseType=false
				document.body.style.overflow = 'scroll'
			},
			togglePopup(type,open){
				this.type = type;
				this.$refs[open].open()
				this.showFx = true
				document.body.style.overflow = 'hidden'
			},
			cancel(type) {
				this.showFx = false
				this.$refs[type].close()
				document.body.style.overflow = 'scroll'
			},
			toOrder(){
				uni.navigateTo({
					url:'recreationOrder'
				})
			},
			
			
		},
		created(){
			if(this.roomConf.openMore==true){
				this.showMoreSm = true
			}else if(this.roomConf.openMore==false){
				this.showMoreSm = false
			}
		},
		
	}
</script>

<style scoped>
	.roombody{
		width: 750upx;
		height: 100vh;
		position: fixed;
		top: 0;
		z-index: 889;
		left: 0;
	}
	/* swiper */
	.mask{
		width: 750upx;
		height: 100vh;
		position: absolute;
		background: rgba(0,0,0,0.3);
	}
	.swiper{
		width: 750upx;
		height: 400upx;
		
	}

	.swiper-item{
		width: 670upx;
		height: 347upx;
		margin-top: 26.5upx;
	}
	.swiper-item-in{
		width: 670upx;
		height: 400upx;
		margin-top: 0;
	}
	.room-area{
		width: 100%;
		height: calc(80vh - 158upx);
		overflow: scroll;
	}
	.swiper-item-in img{
		width: 630upx;
		height: 400upx;
		margin-left: 20upx;
		margin-right: 20upx;
		border-radius: 20upx;
	}
	.swiper-item img{
		width: 670upx;
		height: 347upx;
		border-radius: 20upx;
	}
	.dot-main {
		width: 750upx;
		height: 30upx;
		top:480upx;
		display: flex;
		position: absolute;
		z-index: 20;
		justify-content: center;
		align-items: center;
	}
	.dot-box{
		/* width: 86upx; */
		padding-left: 30upx;
		padding-right: 30upx;
		height: 40upx;
		border-radius: 20upx;
		background: rgba(0,0,0,0.5);
	}
	.dot-box text{
		color: #FFFFFF;
		display: block;
		/* width: 86upx; */
		height: 40upx;
		line-height: 40upx;
		text-align: center;
		font-size: 28upx;
	}
	/* body */
	
	.room-body{
		width: 750upx;
		border-radius: 40upx 40upx 0 0;
		height: 80vh;
		background: #ffffff;
		position: absolute;
		bottom: 0;
		z-index: 99;
		overflow:scroll;
		scroll-y:hidden;
	}
	.room-body::-webkit-scrollbar {
        display: none;/*隐藏滚动条*/
    }
	.room-head{
		width:100%;
		padding:0 42upx;
		box-sizing: border-box;
		height: 90upx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	.room-head text{
		font-size: 36upx;
		line-height: 90upx;
	}
	
	.room-photos{
		width: 750upx;
		height: 400upx;
		margin-top: 50upx;
	}
	.room-info{
		width: 750upx;
		height:  150upx;
		margin-top: 30upx;
	}
	.room-name{
		margin-left: 33upx;
		font-size: 36upx;
		font-weight: bold;
	}
	.room-tips{
		width: 688upx;
		height: 100upx;
		margin:20upx 31upx 40upx 31upx;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}
	
	.room-tips .room-tips-item:first-child image{
		float: right;
		margin-left:20upx;
	}
	.room-tips-item{
		/* width: 33%; */
		font-size: 24upx;
		float: left;
		line-height: 50upx;
		color: #666666;
		margin-right: 80upx;
	}
	.room-tips-item image{
		width: 20upx;
		margin-top: 15upx;
		height: 20upx;
		margin-right: 20upx;
		float: left;
	}
	.sm-list{
		width: 750upx;
		height: auto;
	}
	.sm-item{
		margin-top: 72upx;
		width: 750upx;
		height: auto;
	}
	.sm-text{
		width: 671upx;
		margin-left: 39upx;
	}
	.text-item{
		font-size: 28upx;
		color: #666666;
		text-indent: 56upx;
	}
	.sm-top{
		font-size: 28upx;
		margin-left: 39upx;
		color: #666666;
		margin-top: 40upx;
	}
	
	
	.list-title{
		width: 93.4%;
		margin-left: auto;
		margin-right: auto;
		height: 58.4upx;
		margin-top:20upx;
	}
	.list-title text{
		font-size: 32upx;
		font-weight: bolder;
	}
	.shu{
		width: 0.7%;
		height: 3.06vw;
		background: #55A0FF;
		float: left;
		margin-top: 2.3vw;
		margin-right: 10px;
	}
	.yuding-box{
		width: 750upx;
		margin-top: 40upx;
		height: 98upx;
		box-shadow:0px -1px 3px #dcdada
	}
	.yuding{
		width: 240upx;
		height: 98upx;
		float: right;
		color: #FFFFFF;
		text-align: center;
		font-size: 36upx;
		border: none;
		border-radius: 0;
		line-height: 98upx;
		background: -webkit-linear-gradient(top, #54B0FF,#577AFF);
		/* Safari 5.1 - 6.0 */
		background: -o-linear-gradient(top, #54B0FF,#577AFF);
		/* Opera 11.1 - 12.0 */
		background: -moz-linear-gradient(top, #54B0FF,#577AFF);
		/* Firefox 3.6 - 15 */
		background: linear-gradient(to bottom, #54B0FF,#577AFF);
		/* 标准的语法 */
	}
	.price{
		font-size: 40upx;
		color: #E25115;
		margin-left: 46upx;
		line-height: 98upx;
	}
	.more-sm{
		width: 750upx;
		margin-top: 50upx;
		display: flex;
		flex-direction: row;
		margin-bottom: 30upx;
		justify-content:flex-end;
	}
	.more-sm text{
		color: #54B0FF;
		font-size: 30upx;
	}
	.more-sm image{
		padding-top: 10upx;
		margin-left: 20upx;
		width: 23upx;
		height: 14upx;
	}
	.shouqi{
		transform:rotate(180deg);
	}
	
	/* 头部视频 */
	.header{
		width: 750upx;
		height: 427upx;
		position: relative;
	}
	.header-bg{
		width: 750upx;
		height: 427upx;
		position: absolute;
	}
	.back{
		width: 60upx;
		height: 60upx;
		top: 60upx;
		left: 26upx;
		position: absolute;
	}
	.back image{
		width: 30upx;
		height: 36upx;
	}
	.play{
		position: absolute;
		top:235upx;
		left:342upx;
		width:0;
		height:0;
		border-top:35.5upx solid transparent;
		border-bottom:35.5upx solid transparent;
		border-left:63upx solid #FFFFFF;
	}
	.p-num{
		width: 125upx;
		height: 58upx;
		top: 183upx;
		right: 0;
		position: absolute;
		background: rgba(0,0,0,0.5);
		border-radius: 30upx 0 0 30upx;
		position: absolute;
	}
	.p-num image{
		width: 26upx;
		height: 26upx;
		margin-left:36upx;
		margin-top: 17upx;
		float: left;
	}
	.VR-img{
		width: 92upx !important;
		height: 32upx !important;
		margin-left:20upx !important;
		margin-top: 13upx !important;
	}
	.p-num text{
		color: #FFFFFF;
		font-size: 24upx;
		line-height: 58upx;
		float: left;
		margin-left: 16upx;
	}
	.header-bottom{
		width: 750upx;
		height: 30upx;
		bottom: 0upx;
		/* border-radius: 30upx 30upx 0 0; */
		background: #FFFFFF;
		position: absolute;
	}
	
	/*套餐主体*/
	
	.order-title{
		height: 70upx;
		width: 700upx;
		margin-left: 25upx;
		margin-top: 53upx;
		/* margin-top: 40upx; */
	}
	.order-title image{
		height: 28upx;
		width: 28upx;
		margin-left: 0upx;
		position: absolute;
		margin-top: -6upx;
	}
	.order-title-shop {
		width: 70%;
		margin-left: 40upx;
		height: 30upx;
		display: block;
		font-size: 26upx;
		line-height: 20upx;
	}
	.order-title-food {
		width: 70%;
		height: 30upx;
		display: block;
		font-size: 32upx;
		line-height: 20upx;
		margin-top: 20upx;
		font-weight: bold;
	}
	
	.pic-list{
		width: 700upx;
		height: 187upx;
		margin-left: auto;
		margin-right: auto;
		margin-top: 40upx;
	}
	.scroll-view_H{
		width: 700upx;
		height: 187upx;
		white-space: nowrap;
	}
	.scroll-view-item_H {
		display: inline-block;
		width: 257upx;
		height: 187upx;
		margin-right: 40upx;
		border-radius: 10upx;
		text-align: center;
		font-size: 28upx;
		color: #999999;
		background: #ECECEC;
	}
	/* .scroll-view-item_H image{
		display: inline-block;
		width: 257upx;
		height: 187upx;
		margin-right: 40upx;
		border-radius: 10upx;
		text-align: center;
		font-size: 28upx;
		color: #999999;
		background: #ECECEC;
	} */
	.hd-list{
		width: 750upx;
		height: 40upx;
		display: flex;
		flex-direction: row;
	}
	.hd-item{
		width: 180upx;
		height: 40upx;
		margin-left: 25upx;
	}
	.item-img{
		width: 28upx;
		height: 28upx;
		margin-top: 8upx;
		margin-right: 20upx;
		float: left !important;
	}
	.item-text{
		float: left;
		font-size: 24upx;
		color: #55A0FF;
		line-height: 40upx;
	}
	
	
	.list-title{
		width: 93.4%;
		margin-left: auto;
		margin-right: auto;
		height: 58.4upx;
		margin-top:20upx;
	}
	.list-title text{
		font-size: 28upx;
		font-weight: bolder;
	}
	.shu{
		width: 0.7%;
		height: 3.06vw;
		background: #55A0FF;
		float: left;
		margin-top: 2.3vw;
		margin-right: 10px;
	}
	
	.food-pl{
		width: 143upx;
		font-size: 25upx;;
		color: #999999;
		height: 50upx;
		margin-top: 18upx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		
		overflow: hidden;
		float: left;
	}
	.bottom{
		width:750upx;
		height: 98upx;
		background: #FFFFFF;
		position: fixed;
		bottom: 0;
	}
	.bottom-price{
		margin-left: 20upx;
		font-size: 34upx;
		float: left;
		line-height: 124upx;
		color: rgba(226,81,21,1.00);
	}
	.bottom-buy{
		float: right;
		/* margin-right: 20upx; */
		width:240upx;
		height: 98upx;
		
		background: -webkit-linear-gradient(left, #54B1FF,#5873FF);
		/* Safari 5.1 - 6.0 */
		background: -o-linear-gradient(right, #54B1FF,#5873FF);
		/* Opera 11.1 - 12.0 */
		background: -moz-linear-gradient(right, #54B1FF,#5873FF);
		/* Firefox 3.6 - 15 */
		background: linear-gradient(to right, #54B1FF,#5873FF);
		/* 标准的语法 */
		color: #FFFFFF;
		font-size: 28upx;
		text-align: center;
		line-height: 98upx;
		/* border-radius: 40upx; */
	}
	.bottom-add{
		float: right;
		/* margin-right: 20upx; */
		width:240upx;
		height: 98upx;
		
		background: rgba(169,215,255,1.00);
		color: #FFFFFF;
		font-size: 28upx;
		text-align: center;
		line-height: 98upx;
		/* border-radius: 40upx; */
	}
	
	.sm-list{
		width: 750upx;
		height: auto;
	}
	.sm-item{
		margin-top: 72upx;
		width: 750upx;
		height: auto;
	}
	.sm-text{
		width: 671upx;
		margin-left: 39upx;
	}
	.text-item{
		font-size: 28upx;
		color: #666666;
		text-indent: 56upx;
	}
	.sm-top{
		font-size: 28upx;
		margin-left: 39upx;
		color: #666666;
		margin-top: 40upx;
	}
	
	
	.list-title{
		width: 93.4%;
		margin-left: auto;
		margin-right: auto;
		height: 58.4upx;
		margin-top:20upx;
	}
	.list-title text{
		font-size: 32upx;
		font-weight: bolder;
	}
	.shu{
		width: 0.7%;
		height: 3.06vw;
		background: #55A0FF;
		float: left;
		margin-top: 2.3vw;
		margin-right: 10px;
	}
	
	.room-tips{
		width: 688upx;
		height: 100upx;
		margin-left: 31upx;
		margin-top: 20upx;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}
</style>
